<!-- 修改地址弹窗 -->
<template>
	<view>
		<uni-popup ref="addressPopup" type="center" :mask-click="false">
			<view class="address-modal">
				<view class="modal-header" v-if="defaultAddress && defaultAddress.item && defaultAddress.item._id">修改地址</view>
				<view class="modal-header" v-else>新增地址</view>
				<uni-icons type="closeempty" size="20" class="modal-icon" @click="closeModal"></uni-icons>
				<view class="modal-content">
					<uni-forms label-width="80px" ref="customForm" :rules="customRules" :modelValue="customFormData">
						<uni-forms-item label="收件人" required name="name">
							<uni-easyinput v-model="customFormData.name" placeholder="请输入收件人姓名" />
						</uni-forms-item>
						<uni-forms-item label="联系方式" required name="mobile">
							<uni-easyinput v-model="customFormData.mobile" placeholder="请输入手机号码" />
						</uni-forms-item>
						
						<uni-forms-item label="所在地区" required name="area">
							<uni-data-picker placeholder="请选择地址" preload popup-title="请选择所在地区" collection="opendb-city-china"
								v-model="area" field="code as value, name as text" orderby="value asc"
								:step-searh="true" self-field="code" parent-field="parent_code" @change="onchange"
								@nodeclick="onnodeclick">
							</uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="详细地址" required name="address">
							<uni-easyinput type="textarea" v-model="customFormData.address" placeholder="请输入详细地址" />
						</uni-forms-item>
					</uni-forms>
					
					
					<view class="button-group">
						<button class="btn cancel" @click="closeModal">取消</button>
						<button class="btn confirm" @click="submit('customForm')">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var db = uniCloud.database();
	export default {
		name: "modifyAddress",
		data() {
			return {
				area:[],
				// 自定义表单数据
				customFormData: {
					name: '', // 收件人
					mobile: '', // 手机号
					area: [], // 回显地址
					address: '' ,// 详细地址
					classesList:''
				},
				// 校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '收件人不能为空'
						}]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '手机号不能为空'
							},
							{
								format: 'number',
								errorMessage: '手机号只能输入数字'
							}
						]
					},
					area: {
						rules: [{
							required: true,
							errorMessage: '请选择收件人地址'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '详细地址不能为空'
						}]
					},
				},

			};
		},
		props: {
			defaultAddress: {
				type: Object, // 数字类型
				required: false, // 必填项
				default: null // 默认值
			},
			userinfo:{
				type:Object,
				default:{}
			}
		},
		
		watch:{
			defaultAddress(val){
				this.customFormData = val.item;
				if(val && val.item && val.item.area){
					this.area = val.item.area.slice(-1)[0].value;
				}
				
			}
		},
		
		methods: {
			// 省市县选项变化
			onchange(e) {
				const value = e.detail.value
				this.customFormData.classesList = e.detail.value
				this.customFormData.area = e.detail.value;
			},
			// 点击省市县选项
			onnodeclick(node) {
				// console.log('00:', this.customFormData.classes)
			},

			// 打开修改地址弹窗
			openModal(val) {
				if(val){
					this.customFormData = JSON.parse(JSON.stringify(val));
				}
				if(!this.defaultAddress || !this.defaultAddress.item || this.defaultAddress.item._id){
					this.area = '';
				}
				this.$refs.addressPopup.open();
			},
			// 关闭修改地址弹窗
			closeModal() {
				this.$refs.addressPopup.close();
			},
			// 提交表单
			submit(ref) {
				var that = this;
				this.$refs[ref].validate().then(res => {
					uni.showLoading({
						title:'保存中'
					})
					res.uid = this.userinfo._id;
					res.create_date = new Date().getTime()
					res.mobile = JSON.stringify(res.mobile);
					var defaultAddress = this.defaultAddress;
					if(!defaultAddress.item._id && res.uid){
						db.collection('address').add(res).then(res=>{
							this.customFormData._id = res.result.id;
							uni.hideLoading()
							uni.showToast({
								title:'添加成功'
							})
							this.closeModal();
							setTimeout(function(){
								// 通知父组件
								that.$emit('addressUpdated', that.customFormData);
							},2000);
						});
					}else if(defaultAddress.item._id && res.uid){
						db.collection('address').where({_id:defaultAddress.item._id}).update(res).then(res=>{
							uni.hideLoading()
							uni.showToast({
								title:'修改成功'
							})
							this.closeModal();
							setTimeout(function(){
								var data = {
									index:defaultAddress.index,
									item:that.customFormData
								}
								// 通知父组件
								that.$emit('addressUpdated', data);
							},2000);
						});
					}
					
					
					
				}).catch(err => {
					console.log('err', err);
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					});
				})
			},

		}
	}
</script>

<style scoped>
	.address-modal {
		width: 500px;
		height: 340px;
		background: #fff;
		border-radius: 16px;
		/* padding: 30px 20px; */
		box-sizing: border-box;
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
	}

	.modal-header {
		width: 100%;
		height: 40px;
		font-size: 14px;
		font-weight: 600;
		background-color: #F5F5F5;
		border-radius: 8px;
		padding: 0 16px;
		box-sizing: border-box;
		line-height: 40px;
		/* margin-bottom: 25px; */
		/* text-align: center; */
	}

	.modal-content {
		background-color: white;
		width: 100%;
		height: 390px;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 8px;
	}


	/* 按钮 */

	/* uni-button[type='primary'] {
		background-color: #D92400;
	} */
	
	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30px auto;
		margin-bottom: 0;
		width: 290px;
	}
	
	.btn {
		width: 25%;
		height: 30px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30px;
		font-size: 14px;
		/* margin-left: 60px; */
	}
	
	.btn.cancel {
		background: #f5f5f5;
		color: #333;
		/* margin-left: 120px; */
		/* margin-right: 20px; */
	}
	
	.btn.confirm {
		background: #E91F1B;
		color: #fff;
		margin-left: 0;
	}
</style>